<template>
  <div>
    <div ref="durationChat" style="width:190px;" :style="{height :anonymizeData.length > 5 ?  anonymizeData.length * 60 + 'px' : '280px'}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { anonymizeOverviewOption } from '../../../../../../utils/js/point'
export default {
  props: {
    anonymizeData:{
      default:()=>[]
    },
    anonymizeArea:{
      default:()=>[]
    },
    color: {
      default: '#4278FC'
    }
  },
  data() {
    return {
      allData: [],
      bottom: 0,
      myChart: null,
    }
  },
  methods: {
    // 初始化echart
    initChart() {
      if (this.anonymizeData.length === 1) {
        for (var i = 0; i <= 2; i++) {
          this.anonymizeData.unshift(' ')
        }
        this.bottom = 208
      } else {
        this.bottom = 0
      }
      if(this.myChart){
        this.myChart.dispose();
        this.myChart = null;
      }
      this.myChart = echarts.init(this.$refs.durationChat);
      anonymizeOverviewOption.grid.left = 18;
      anonymizeOverviewOption.grid.bottom = this.bottom;
      anonymizeOverviewOption.yAxis.data = this.anonymizeArea;
      anonymizeOverviewOption.xAxis.min = 0;
      anonymizeOverviewOption.xAxis.max = Math.max.apply(Math,this.anonymizeData);
      anonymizeOverviewOption.series[0].color = this.color;
      anonymizeOverviewOption.series[0].data = this.anonymizeData;
      this.myChart.setOption(anonymizeOverviewOption);
      // 图表自适应
      window.addEventListener('resize', () => {
        this.myChart && this.myChart.resize();
      });
    }
  },
  watch: { 
		anonymizeData(val, oldVal) {
			this.$nextTick(_=>{
        this.initChart();
      })
		}
	},
}
</script>